<template>
  <div class="app-container" :style="{
    height: tagsView ? `calc(100vh - 50px - 34px)` : 'calc(100vh - 50px)',
  }">
    <div class="app-left">
      <div class="app-left-top">
        <div class="app-left-top-left">
          <div class="app-title">数据概况</div>
          <div class="app-left-top-left-content">
            <div class="app-item" v-for="(item, k) in statisticsList" :key="k">
              <div class="app-item-label">{{ item.label }}</div>
              <div class="app-item-value">
                <span>
                  <Scroll-number :value="item.value" />
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="app-left-top-right">
          <div class="app-title">工单统计</div>
          <div class="app-left-top-right-content">
            <div class="app-item" v-for="(item, k) in orderCountList" :key="k">
              <div class="app-item-label">{{ item.label }}</div>
              <div class="app-item-value">
                <span>
                  <Scroll-number :value="item.value" />
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="app-left-center">
        <div class="app-left-center-left">
          <div class="app-title">
            <span>系统列表</span>
            <el-select v-model="sysItemId" size="mini" :popper-append-to-body="false" placeholder="请选择项目"
              @change="getSystemList">
              <el-option v-for="item in projectList" :key="item.projectId" :label="item.projectName"
                :value="item.projectId" />
            </el-select>
          </div>
          <div class="app-content-row blue">
            <div>系统</div>
            <div>本月数据</div>
            <div>上月数据</div>
          </div>
          <div class="app-content-box" :style="{
    height: tagsView
      ? `calc(100vh - 50px - 34px - 510px)`
      : 'calc(100vh - 50px - 510px)',
  }" id="system">
            <div id="system1">
              <div class="app-content-row" v-for="(item, k) in systemList" :key="k">
                <div>{{ item.systemName }}</div>
                <div>{{ item.thisTimeStatus }}</div>
                <div>{{ item.lastTimeStatus }}</div>
              </div>
            </div>
            <div class="empty" v-if="systemList.length == 0">暂无数据</div>
          </div>
        </div>
        <div class="app-left-center-center">
          <div class="app-title">巡检列表</div>
          <div class="empty">建设中</div>
        </div>
        <div class="app-left-center-right">
          <div class="app-title">
            <span>设备列表</span>
            <el-select v-model="devItemId" size="mini" :popper-append-to-body="false" placeholder="请选择项目"
              @change="getDeviceList">
              <el-option v-for="item in projectList" :key="item.projectId" :label="item.projectName"
                :value="item.projectId" />
            </el-select>
          </div>
          <div class="app-content-row blue">
            <div>设备</div>
            <div>本月数据</div>
            <div>上月数据</div>
          </div>
          <div class="app-content-box" :style="{
    height: tagsView
      ? `calc(100vh - 50px - 34px - 510px)`
      : 'calc(100vh - 50px - 510px)',
  }" id="device">
            <div id="device1">
              <div class="app-content-row" v-for="(item, k) in deviceList" :key="k">
                <div>{{ item.deviceName }}</div>
                <div>{{ item.thisTimeStatus }}</div>
                <div>{{ item.lastTimeStatus }}</div>
              </div>
            </div>
            <div class="empty" v-if="deviceList.length == 0">暂无数据</div>
          </div>
        </div>
      </div>
      <div class="app-left-bottom">
        <div class="menu-item" v-for="(item, k) in menuList" :key="k" @click="handleMenu(item)">
          <img :src="item.icon" :alt="item.name" />
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
    <div class="app-right">
      <div class="app-right-top">
        当前{{
    currentNode.level == 1
      ? "机构"
      : currentNode.level == 2
        ? "委托单位"
        : currentNode.level == 3
          ? "项目"
          : ""
  }}：{{ currentNode.label }}
      </div>
      <div class="app-right-bottom">
        <el-input placeholder="请输入关键字" size="mini" v-model="filterText" clearable />
        <el-tree ref="rightRef" :data="treeList" highlight-current :props="{
    children: 'children',
    label: 'label',
  }" :expand-on-click-node="false" default-expand-all :filter-node-method="filterNode" @node-click="chooseNode" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  treeData,
  dataOverview,
  deviceData,
  systemData,
  projectData,
  dataOrder,
} from "@/api/home/index.js";
import ScrollNumber from "@/components/ScrollNumber";
export default {
  name: "Index",
  components: { ScrollNumber },
  data() {
    return {
      statisticsList: [
        { label: "设备总数", value: 0 },
        { label: "工单", value: 0 },
        { label: "机构数", value: 0 },
        { label: "业主数量", value: 0 },
        { label: "楼栋构筑物总数", value: 0 }
      ],// 数据概况
      orderCountList: [
        // 工单统计
        { label: "待处理工单", value: 0 },
        { label: "已处理工单", value: 14 },
      ],
      projectList: [], // 项目列表
      systemList: [], // 系统列表
      sysItemId: "", // 系统项目ID
      sysTimer: null, // 系统定时器
      deviceList: [], // 设备列表
      devTimer: null, // 设备定时器
      devItemId: "", // 设备项目ID
      menuList: [
        // 菜单列表
        { icon: require("@/assets/images/dwgl.png"), name: "单位信息", path: "/enterprise/enterprise_info" },
        { icon: require("@/assets/images/sbgl.png"), name: "设备信息", path: "/building/device" },
        { icon: require("@/assets/images/spgl.png"), name: "视频信息", path: "/manager" },
        { icon: require("@/assets/images/xfxj.png"), name: "建设中", path: "" },
        { icon: require("@/assets/images/wxwb.png"), name: "维保信息", path: "/contract/maintenanceRecord" },
        {
          icon: require("@/assets/images/pxyl.png"),
          name: "模板管理",
          path: "/template/org",
        },
        { icon: require("@/assets/images/fxpg.png"), name: "风险评估", path: "" },
      ],
      currentNode: { label: "全部", level: 1 }, // 当前选中
      filterText: "", // 过滤内容
      treeList: [], // 树列表
    };
  },
  computed: {
    tagsView() {
      return this.$store.state.settings.tagsView;
    },
  },
  watch: {
    filterText(val) {
      this.$refs.rightRef.filter(val);
    },
  },
  mounted() {
    this.getTreeList();
    this.getOverview();
    this.getOrderList();
    this.getProjectList();
  },
  methods: {
    // 跳转菜单
    handleMenu(item) {
      if (item.path == "/") return;
      this.$router.push(item.path);
    },
    // 获取数据概览
    getOverview(params = {}) {
      dataOverview(params).then((res) => {
        if (res.code == 200) {
          let list = [
            { label: "设备总数", value: res.data.deviceNum },
            { label: "工单", value: res.data.workOrderNum },
            { label: "机构数", value: res.data.orgNum },
            { label: "业主数量", value: res.data.customerNum },
            { label: "楼栋构筑物总数", value: res.data.buildingNum },
          ]
          this.statisticsList = list.filter(
            (item) => typeof item.value === "number"
          );
        }
      });
    },
    // 获取工单统计
    getOrderList(params = {}) {
      dataOrder(params).then((res) => {
        if (res.code == 200) {
          this.orderCountList[0].value = res.data.processing;
          this.orderCountList[1].value = res.data.completed;
        }
      });
    },
    // 获取系统列表
    getSystemList() {
      systemData({ projectId: this.sysItemId }).then((res) => {
        if (res.code == 200) {
          this.systemList = res.data || [];
          setTimeout(() => {
            if (this.sysTimer) {
              clearInterval(this.sysTimer);
              this.sysTimer = null;
            }
            this.scrollSpeed("system", "sysTimer");
          }, 0);
        }
      });
    },
    // 获取设备列表
    getDeviceList() {
      deviceData({ projectId: this.devItemId }).then((res) => {
        if (res.code == 200) {
          this.deviceList = res.data || [];
          setTimeout(() => {
            if (this.devTimer) {
              clearInterval(this.devTimer);
              this.devTimer = null;
            }
            this.scrollSpeed("device", "devTimer");
          }, 0);
        }
      });
    },
    // 获取树状图数据
    getTreeList() {
      treeData().then((res) => {
        if (res.code == 200) {
          this.treeList = res.data;
        }
      });
    },
    // 获取项目列表
    getProjectList(params = {}) {
      projectData(params).then((res) => {
        if (res.code == 200) {
          this.projectList = res.data;
          if (res.data.length) {
            this.sysItemId = res.data[0].projectId;
            this.devItemId = res.data[0].projectId;
          } else {
            this.sysItemId = "";
            this.devItemId = "";
          }
          this.getSystemList();
          this.getDeviceList();
        }
      });
    },
    // 过滤内容
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 选择节点
    chooseNode(data) {
      this.currentNode = data;
      let params = {
        orgId: data.level == 1 ? data.id : null,
        customerId: data.level == 2 ? data.id : null,
        projectId: data.level == 3 ? data.id : null,
      };
      this.getOverview(params);
      this.getOrderList(params);
      this.getProjectList(params);
    },
    // 表格滚动
    scrollSpeed(id, timer) {
      let box = document.getElementById(id);
      let table = document.getElementById(id + 1);
      let row = table.getElementsByClassName("app-content-row");
      if (table.clientHeight > box.clientHeight) {
        let scrollSpeed = 1; // 滚动速度
        let intervalTime = 50; // 滚动间隔时间
        let currentPosition = 0;
        this[timer] = setInterval(() => {
          currentPosition += scrollSpeed;
          table.style.transform = `translateY(-${currentPosition}px)`;

          if (currentPosition >= row[0].offsetHeight) {
            table.style.transform = "translateY(0)";
            currentPosition = 0;
            table.appendChild(row[0]);
          }
        }, intervalTime);
      } else {
        table.style.transform = `translateY(-${0}px)`;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  width: 100%;
  background-color: #132230;
  display: flex;
  gap: 20px;

  .app-left {
    flex: 1 0 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 20px;

    &-top {
      height: 200px;
      display: flex;
      gap: 20px;

      &-left {
        flex: 2;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 0 20px 20px;
        box-sizing: border-box;

        &-content {
          display: flex;
          justify-content: space-around;
        }
      }

      &-right {
        flex: 1;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 0 20px 20px;
        box-sizing: border-box;

        &-content {
          display: flex;
          justify-content: space-around;
        }
      }
    }

    &-center {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 20px;

      &-left {
        background-color: rgba(0, 0, 0, 0.3);
        padding: 0 20px 20px;
        box-sizing: border-box;
      }

      &-center {
        background-color: rgba(0, 0, 0, 0.3);
        padding: 0 20px 20px;
        box-sizing: border-box;
      }

      &-right {
        background-color: rgba(0, 0, 0, 0.3);
        padding: 0 20px 20px;
        box-sizing: border-box;
      }
    }

    &-bottom {
      height: 120px;
      background-color: rgba(0, 0, 0, 0.3);
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      gap: 20px;

      .menu-item {
        flex: 1;
        height: 80px;
        background-color: rgba(0, 0, 0, 0.1);
        border: 2px solid #162931;
        display: flex;
        align-items: center;
        transition: all 0.3s;

        &:hover {
          cursor: pointer;
          border: 2px solid #213e4a;
        }

        &:active {
          background-color: rgba(0, 0, 0, 0.3);
        }

        img {
          width: 50px;
          height: 52px;
          margin: 0 20px;
        }

        span {
          color: #c2c2c2;
        }
      }
    }
  }

  .app-right {
    width: 300px;
    display: flex;
    flex-direction: column;
    gap: 20px;

    &-top {
      padding: 0 20px;
      height: 50px;
      color: #c2c2c2;
      line-height: 50px;
      background-color: rgba(0, 0, 0, 0.3);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    &-bottom {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      background-color: rgba(0, 0, 0, 0.3);
      overflow-y: auto;
    }
  }

  .app-title {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 18px;
  }

  .app-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-label {
      height: 40px;
      line-height: 40px;
      color: #fff;
    }

    &-value {
      position: relative;
      height: 60px;
      line-height: 60px;
      margin-top: 20px;

      span {
        position: relative;
        z-index: 9;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
      }

      &::before {
        content: "";
        position: absolute;
        top: 25%;
        left: 50%;
        width: calc(100% + 20px);
        height: 28px;
        background-color: #082671;
        border-radius: 4px;
        transform: translateX(-50%) translateY(-50%);
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 25%;
        left: 50%;
        width: calc(100% + 20px);
        height: 28px;
        background-color: #082671;
        border-radius: 4px;
        transform: translateX(-50%) translateY(50%);
      }
    }
  }

  .app-content-box {
    width: 100%;
    overflow: hidden;
  }

  .app-content-row {
    display: flex;
    height: 40px;
    align-items: center;
    color: #fff;

    div {
      flex: 1;
      text-align: center;
    }
  }

  .blue {
    background-color: #082671;
  }

  .empty {
    height: calc(100% - 50px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #fff;
  }
}

::v-deep .el-input__inner {
  background: transparent;
  color: #c2c2c2;
}

::v-deep .el-tree {
  background-color: transparent;
}

::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: rgba(0, 0, 0, 0.3);
  color: #c2c2c2;
}

::v-deep .el-tree .el-tree-node__content,
.el-upload-list__item {
  color: #c2c2c2;
  height: 30px;

  &:hover {
    background-color: rgba(0, 0, 0, 0.3);
  }
}

::v-deep .el-select-dropdown {
  background-color: #0d1822 !important;
  border: 1px solid #25435e !important;

  .el-select-dropdown__item {
    color: #c2c2c2;
  }

  .hover {
    background-color: #213e4a;
  }
}
</style>
